<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.53">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41480445-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<title data-react-helmet="true">Tools - Pure</title>

<meta data-react-helmet="true" charset="utf-8"><meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-react-helmet="true" property="og:title" content="Tools - Pure"><meta data-react-helmet="true" name="description" content="Write, manipulate, and do more with CSS."><meta data-react-helmet="true" property="og:description" content="Write, manipulate, and do more with CSS."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">


<link rel="stylesheet" href="/styles.e0d41c52.css">


<link rel="preload" href="/styles.59801a08.js" as="script">

<link rel="preload" href="/runtime~main.5e4f6629.js" as="script">

<link rel="preload" href="/main.596eb772.js" as="script">

<link rel="preload" href="/common.71de0887.js" as="script">

<link rel="preload" href="/3.0a320f10.js" as="script">

<link rel="preload" href="/9c2f845f.72590fcf.js" as="script">

</head>
<body>

<div id="__docusaurus">
<div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a><div id="menu"><div class="pure-menu"><a class="pure-menu-heading" href="/">Pure</a><ul class="pure-menu-list"><li class="pure-menu-item"><a class="pure-menu-link" href="/start/">Get Started</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/layouts/">Layouts</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/base/">Base</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/grids/">Grids</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/forms/">Forms</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/buttons/">Buttons</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/tables/">Tables</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/menus/">Menus</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/tools/">Tools</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/customize/">Customize</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/extend/">Extend</a></li><li class="pure-menu-item"><a href="https://github.com/pure-css/pure/releases/" class="pure-menu-link">Releases</a></li></ul></div></div><div id="main" class="tools"><div class="header"><h1>Tools</h1><h2>Write, manipulate, and do more with CSS.</h2></div><div class="content"><h2 id="installing-pure-with-npm" class="content-subhead">Installing Pure with npm<a href="#installing-pure-with-npm" class="content-link" title="Heading anchor"></a></h2><p>You can add Pure to your project through <a href="https://www.npmjs.com/">npm</a>. This is our recommended way to to integrate Pure into your project&#x27;s build process and tool chain.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>$ npm install purecss --save</code></pre></div></div><p><code>require(&#x27;purecss&#x27;)</code> will load an object with the following methods:</p><ul><li><code>getFile(name)</code></li>– Retrieve contents of a Pure module file.<li><code>getFilePath(name)</code></li>– Return full path to a Pure file.</ul><h2 id="installing-pure-with-composer" class="content-subhead">Installing Pure with Composer<a href="#installing-pure-with-composer" class="content-link" title="Heading anchor"></a></h2><p>You can also install Pure with <a href="https://getcomposer.org/">Composer</a>.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>$ composer require pure-css/purecss</code></pre></div></div><h2 id="extending-pure-with-grunt" class="content-subhead">Extending Pure with Grunt<a href="#extending-pure-with-grunt" class="content-link" title="Heading anchor"></a></h2><p>We&#x27;ve written several tools that help you extend Pure and integrate it with your project&#x27;s CSS. These tools are available as <b><a href="http://gruntjs.com">Grunt</a></b> plugins that can easily be integrated into your existing <code>Gruntfile.js</code>.</p><aside><p>If you haven&#x27;t used Grunt before, it&#x27;s very easy to set up. Just head over to the <a href="http://gruntjs.com/getting-started">Getting Started</a> page to learn more.</p></aside><h2 id="extending-pure-with-rework" class="content-subhead">Extending Pure with Rework<a href="#extending-pure-with-rework" class="content-link" title="Heading anchor"></a></h2><p>We&#x27;ve taken a layered approach to developing Pure&#x27;s tooling. Most of the tools are first built as <b><a href="https://github.com/reworkcss/rework">Rework</a></b> plugins. This allows you to compose Pure&#x27;s Rework plugins together with other Rework plugins. It also allows the Grunt plugins to be written as <em>very thin</em> wrappers.</p><h2 id="generating-custom-responsive-grids" class="content-subhead">Generating Custom Responsive Grids<a href="#generating-custom-responsive-grids" class="content-link" title="Heading anchor"></a></h2><p>Pure was created to help developer&#x27;s build mobile-first responsive web projects. However, since CSS Media Queries cannot be over-written via CSS, you can use Pure&#x27;s tooling to customize Pure&#x27;s Responsive Grids for your project.</p><h3>Via Grunt</h3><p>Install the <a href="https://www.npmjs.org/package/grunt-pure-grids">Pure Grids Grunt Plugin</a> through npm.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>$ npm install grunt-pure-grids --save-dev</code></pre></div></div><p>Next, add it to your <code>Gruntfile.js</code>.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>grunt.loadNpmTasks(&#x27;grunt-pure-grids&#x27;);</code></pre></div></div><p>Finally, add the necessary configuration through the <code>pure_grids</code> task. To see a full list of all configurable properties, check out the <a href="https://www.npmjs.org/package/grunt-pure-grids#readme">README documentation</a>.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>grunt.initConfig({
    pure_grids: {
        dest : &quot;build/public/css/main-grid.css&quot;,
        options: {
            units: 12, // 12-column grid
            mediaQueries: {
                sm: &#x27;screen and (min-width: 35.5em)&#x27;, // 568px
                md: &#x27;screen and (min-width: 48em)&#x27;,   // 768px
                lg: &#x27;screen and (min-width: 64em)&#x27;,   // 1024px
                xl: &#x27;screen and (min-width: 80em)&#x27;    // 1280px
            }
        }
    }
});</code></pre></div></div><h3>Via Rework</h3><p>If you&#x27;re not using Grunt, you can also generate your custom responsive grids through using the <a href="https://www.npmjs.org/package/rework-pure-grids">Pure Grids Rework Plugin</a>. It has the same configuration options as the Grunt plugin — in fact, this is what powers the Grunt plugin.</p><p>You can install the Rework plugin through npm.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>$ npm install rework rework-pure-grids</code></pre></div></div><p>And it can be used on it&#x27;s own like this, or along side other Rework plugins you might be using.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>import rework from &#x27;rework&#x27;;
import pureGrids from &#x27;rework-pure-grids&#x27;;

const css = rework(&#x27;&#x27;).use(pureGrids.units({
    mediaQueries: {
        sm: &#x27;screen and (min-width: 35.5em)&#x27;, // 568px
        md: &#x27;screen and (min-width: 48em)&#x27;,   // 768px
        lg: &#x27;screen and (min-width: 64em)&#x27;,   // 1024px
        xl: &#x27;screen and (min-width: 80em)&#x27;    // 1280px
    }
})).toString();

// This will log-out the grid CSS.
console.log(css);</code></pre></div></div><h2 id="mutating-selectors" class="content-subhead">Mutating Selectors<a href="#mutating-selectors" class="content-link" title="Heading anchor"></a></h2><p>All selectors defined in Pure&#x27;s source code begin with the <code>.pure-</code> prefix. However, you may want to change this. To accomplish this task, you can use Pure&#x27;s tooling to mutate CSS selectors.</p><h3>Via Grunt</h3><p>Install the <a href="https://www.npmjs.org/package/grunt-css-selectors">CSS Selectors Grunt Plugin</a> through npm.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>$ npm install grunt-css-selectors --save-dev</code></pre></div></div><p>Once it&#x27;s installed, add the task to your <code>Gruntfile.js</code></p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>grunt.loadNpmTasks(&#x27;grunt-css-selectors&#x27;);</code></pre></div></div><p>Finally, add the necessary configuration through the <code>css_selectors</code> task. Check out the <a href="https://www.npmjs.org/package/grunt-css-selectors#readme">README documentation</a> for more details.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>grunt.initConfig({
    css_selectors: {
        options: {
            mutations: [
                {prefix: &#x27;.foo&#x27;}
            ]
        },
        files: {
            &#x27;dest/foo-prefixed.css&#x27;: [&#x27;src/foo.css&#x27;],
        }
    }
});</code></pre></div></div><h3>Via Rework</h3><p>If you&#x27;re not using Grunt, you can also mutate CSS selectors using the <a href="https://www.npmjs.org/package/rework-mutate-selectors">Mutate Selectors Rework Plugin</a>. It has a similar interface to the Grunt plugin — in fact, this is what powers the Grunt plugin.</p><p>You can install the Rework plugin through npm.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>$ npm install rework rework-mutate-selectors</code></pre></div></div><p>And it can be used on it&#x27;s own like this, or along side other Rework plugins you might be using.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code>import rework from &#x27;rework&#x27;;
import selectors from &#x27;rework-mutate-selectors&#x27;;

const css = rework(inputCSS)
    .use(selectors.prefix(&#x27;.foo&#x27;))
    .use(selectors.replace(/^.pure/g, &#x27;.bar&#x27;))
    .toString();

// This will log-out the resulting CSS.
console.log(css);</code></pre></div></div><aside><p>If you have questions or run into issues while these tools, please file them on their respective GitHub repositories.</p></aside></div><div class="footer"><div class="legal pure-g"><div class="pure-u-1 u-sm-1-2"><p class="legal-license">This site is built with ❤️ using Pure v2.0.5<br>All code on this site is licensed under the <a href="https://github.com/pure-css/pure/blob/master/LICENSE">Yahoo BSD License</a> unless otherwise stated.</p></div><div class="pure-u-1 u-sm-1-2"><ul class="legal-links"><li><a href="https://github.com/pure-css/pure/">GitHub Project</a></li><li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li></ul><p class="legal-copyright">© 2014 - Present Yahoo! Inc. All rights reserved.</p></div></div></div></div></div>
</div>

<script src="/styles.59801a08.js"></script>

<script src="/runtime~main.5e4f6629.js"></script>

<script src="/main.596eb772.js"></script>

<script src="/common.71de0887.js"></script>

<script src="/3.0a320f10.js"></script>

<script src="/9c2f845f.72590fcf.js"></script>


</body>
</html>